<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        version="1.0">
    <xsl:output   method   = "html" version  = "1.0" encoding = "UTF-8" indent   = "yes" />
    <xsl:param name="category"/>
    <xsl:param name="artistSearch"/>
    <xsl:template match="/">
        <html>
            <head>
                <link   type="text/css"        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/sunny/jquery-ui.css" rel="Stylesheet" />
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"><xsl:text> </xsl:text></script>
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"><xsl:text> </xsl:text></script>
                <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"><xsl:text> </xsl:text></script>
                <title>Music Brainz search</title>
                <script type="text/css">
                    input.error { background-color:#F3E6E6; }
                         .error { color:red; font-style: italic }
                </script>
            </head>
            <body>
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("input#category").autocomplete({
                            delay: 500,
                            source: "/categories"
                        });

                        $("#searchForm").validate({
                            rules: {
                                    category: { required: true },
                                artistSearch: { required: true },
                            },
                            messages: {
                                category    : { required: "Must search within a category" },
                               artistSearch : { required: "Must enter search terms for artist" },
                            }
                        });
                    });
                </script>
                <h1>Music Brainz search interface</h1>
                <form method="POST" action="search" id="searchForm">
                    <table border="0">
                        <tr>
                            <th>Category</th>
                            <td>
                                <input type="text" id="category" size="20" name="category" value="{$category}"/>
                            </td>
                        </tr>
                        <tr>
                            <th>Artist (search)</th>
                            <td>
                                <input size="30" type="text" id="artistSearch" name="artistSearch" value="{$artistSearch}"/>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="submit" value="search"/></td>
                        </tr>
                    </table>
                </form>
                <xsl:if test="/Root/Artists/Artist">
                    <fieldset>
                        <legend>Matched artists</legend>
                        <div>
                            <xsl:apply-templates select="Root/Artists/Artist"/>
                        </div>
                    </fieldset>
                </xsl:if>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="Artist">
        <li>
            <a href="/browse.artist?artist_uri={@url}">
                <xsl:value-of select="@name"/>
            </a>
        </li>
    </xsl:template>
</xsl:stylesheet>